<template>
	<view class="container">
		<navbar :scrollTop="scrollTop"></navbar>
		<loading-page mode="fullScreen" :show="isLoading"></loading-page>
		<view class="main" v-if="!isLoading">
			<view class="main-header">
				<!-- 搜索 -->
				<search></search>
				<!-- 轮播图 -->
				<banner :list="bannerList || []" @jump="pavilionChange(1, $event)" />
				<!-- 公告 -->
				<notice :list="systemConfig.news_bulletin_list || []"></notice>
				<!-- 视频 -->
				<my-video></my-video>
				<!-- 大牌秒杀 -->
				<sale ref="sale" :dataList="seckillList || []"></sale>
				<!-- 金刚区 -->
				<district :list="productCategoryList || []" @categorySwitchTab="categorySwitchTab"></district>
				<!-- 医美专区 -->
				<medical-cosmetology-zone :list="medicalCosmetologyZoneList || []"
					@detail="pavilionChange(2, $event)"></medical-cosmetology-zone>
				<!-- 新人攻略 -->
				<newcomer-strategy @newcomerClick="pavilionChange(2, '/subPackages/newborn-zone/index')"
					:image="systemConfig.index_newcomer_strategy_img || ''"></newcomer-strategy>
				<!-- 品牌 -->
				<brand :list="brandList || []" @brandClick="brandClick($event, '/subPackages/search/list?keyword=')">
				</brand>
				<!-- 客服 -->
				<customer-service :image="systemConfig.index_service_customer_qrcode_img || ''"></customer-service>
				<!-- 推荐商品 -->
				<recommend-product :list="recommendProductList || []"
					@recommendClick="brandClick($event, '/subPackages/product/product-detail?product_id=')"
					:background="systemConfig.index_recommend_product_img || ''"></recommend-product>
				<!-- 品牌馆入口 -->
				<brand-pavilion-inlet :image="systemConfig.index_brand_pavilion_img || ''"
					@jump="pavilionChange(2, '/subPackages/brand-pavilion/index')"
					v-if="systemConfig.brand_pavilion_status == 1"></brand-pavilion-inlet>
				<!-- 品牌系列 -->
				<brand-series :list="brandCategoryList || []" v-if="systemConfig.brand_pavilion_status == 1"
					@seriesClick="brandClick($event,'/subPackages/product/product-detail?product_id=')"></brand-series>
				<!-- 商品列表 -->
				<index-product-list :list="productList" :total="total" :loadMoreStatus="loadMoreStatus"
					empty-mode="zoom" @productClick="brandClick($event,'/subPackages/product/product-detail?product_id=')"></index-product-list>
			</view>
			<!-- 悬浮窗 -->
			<indexSuspension v-if="!isLoading" :scrollTop="scrollTop" @suspersionClick="brandClick('', $event)">
			</indexSuspension>
			<!-- 开屏红包 -->
			<redEnvelope ref="redEnvelope" :activityByScene="activityByScene" />
			<!-- 分销等级 -->
			<level-upgrade />
			<!-- 消息弹框 -->
			<message-popup />
			<!-- 登录弹框 -->
			<login-message-popup :couponList="couponList || []" />
			<!-- 未登录弹框 -->
			<messageBox :couponList="couponList || []"></messageBox>
		</view>
		<!-- <tabbar :current="0"></tabbar> -->
		<tabbar></tabbar>
	</view>
</template>

<script>
	import navbar from "./components/navbar.vue"
	import search from "./components/search.vue"
	import banner from "./components/banner.vue"
	import notice from "./components/notice.vue"
	import medicalCosmetologyZone from "./components/medical-cosmetology-zone.vue"
	import district from "./components/district.vue"
	import newcomerStrategy from "./components/newcomer-strategy.vue"
	import customerService from "./components/customer-service.vue"
	import brand from "./components/brand.vue"
	import recommendProduct from "./components/recommend-product.vue"
	import seckillActivity from "./components/seckill-activity.vue"
	import activity from "./components/activity.vue"
	import brandPavilionInlet from "./components/brand-pavilion-inlet.vue"
	import indexProductList from "./components/product-list.vue"
	import sale from "./components/sale.vue"
	import myVideo from "./components/video.vue"
	import redEnvelope from "./components/redEnvelope.vue"
	import indexSuspension from "./components/index-suspension.vue"
	import messageBox from "@/components/common/message-box.vue"
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		components: {
			navbar,
			search,
			banner,
			notice,
			medicalCosmetologyZone,
			district,
			newcomerStrategy,
			customerService,
			brand,
			recommendProduct,
			seckillActivity,
			activity,
			brandPavilionInlet,
			indexProductList,
			sale,
			myVideo,
			indexSuspension,
			messageBox,
			redEnvelope,
		},
		data() {
			return {
				scrollTop: 0,
				productList: [],
				page: 1,
				total: 0,
				loadMoreStatus: 1,
			}
		},
		async onLoad() {
			// app隐藏tabbar需要在页面中进行
			uni.hideTabBar({
				success: () => {},
				fail: (ex) => {
					console.log(ex)
					// 捕获报错，防止没有tabbar页面调用后控制台报错
				},
			})
			await this.$onLaunched
			this.getIndex()
			// 登录触发
			uni.$on(["login", "outLogin"], () => {
				console.log(123123)
				// 获取数据
				this.getIndex()
			})
		},
		computed: {
			...mapState({
				isLoading: (state) => state.index.isLoading,
				systemConfig: (state) => state.init.systemConfig,
				bannerList: (state) => state.index.bannerList,
				medicalCosmetologyZoneList: (state) => state.index.medicalCosmetologyZoneList,
				productCategoryList: (state) => state.index.productCategoryList,
				integralproductList: (state) => state.index.integralproductList,
				brandList: (state) => state.index.brandList,
				recommendProductList: (state) => state.index.recommendProductList,
				seckillList: (state) => state.index.seckillList,
				crossBorderList: (state) => state.index.crossBorderList,
				activityProductList: (state) => state.index.activityProductList,
				brandCategoryList: (state) => state.index.brandCategoryList,
				couponList: (state) => state.index.couponList,
				subTemplateIds: (state) => state.init.subTemplateIds,
				isSettings: (state) => state.init.isSettings,
				activityByScene: (state) => state.index.activityByScene,
			}),
		},
		watch: {
			// seckillList(newVal, oldVal) {
			// 	if (newVal.length > 0) {
			// 		this.$nextTick(() => {
			// 			this.$refs.sale.getInit(newVal);
			// 		})
			// 	}
			// },
			isLoading: {
				handler(newVal, oldVal) {
					if (!newVal) {
						this.page = 1
						this.productList = []
						this.getProductList()
					}
				},
				immediate: true, // 立即监听
			},
		},
		methods: {
			...mapActions("index", ["getIndex"]),
			getProductList() {
				var _this = this
				_this
					.$get("product/list", {
						page: _this.page,
						page_size: 10,
					})
					.then((res) => {
						_this.productList = _this.productList.concat(res.data.data)
						_this.total = res.data.total
						if (_this.total == _this.productList.length) {
							_this.loadMoreStatus = 3 // 分页结束
						} else {
							_this.loadMoreStatus = 1 // 上滑加载
						}
					})
					.catch((ex) => {
						console.log(ex)
						_this.$errorToast(ex)
					})
			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop
			},
			// 订阅消息
			pavilionChange(type, params, jump_type = "navigateTo") {
				var _this = this
				// #ifdef APP-PLUS
				_this.bannerJump(type, params)
				// #endif
				// #ifdef MP-WEIXIN
				if (!_this.isSettings && _this.subTemplateIds.length > 0) {
					uni.requestSubscribeMessage({
						tmplIds: _this.subTemplateIds,
						success(res) {
							_this.bannerJump(type, params, jump_type)
							_this.$store.commit("init/setSettings", true)
						},
						fail(err) {
							_this.$store.commit("init/setSettings", true)
							_this.bannerJump(type, params, jump_type)
							_this.$errorToast(err)
						},
					})
				} else {
					_this.bannerJump(type, params, jump_type)
				}
				// #endif
			},
			bannerJump(type, params, jump_type = "navigateTo") {
				if (type == 1) {
					if (this.bannerList[params].path) {
						if (this.bannerList[params].url_type == 50) {
							const fullPath = this.bannerList[params].path
							const path = fullPath.split("?")[0]
							const paramsString = fullPath.split("?")[1] || "" // 参数部分可能为空
							const paramsVal = paramsString.split("=")[1] || 0
							const root_type = this.bannerList[params].root_type
							this["$" + root_type](path)
							this.$store.commit("init/setCategory", paramsVal)
						} else {
							const root_type = this.bannerList[params].root_type
							this["$" + root_type](this.bannerList[params].path)
						}
					}
				} else {
					this["$" + jump_type](params)
				}
			},
			categorySwitchTab(index) {
				this.pavilionChange(2, "/pages/category/index", "switchTab")
				this.$store.commit("init/setCategory", index)
			},
			brandClick(e, jump) {
				this.pavilionChange(2, `${jump + e}`)
			},
			// 上拉加载
			onReachBottom() {
				if (this.total > this.productList.length) {
					this.page++
					this.loadMoreStatus = 2
					this.getProductList()
				}
			},
			onShareAppMessage(res) {
				// 栏目点击分享页面（主页）
				return this.$onShare()
			},
			// 分享到朋友圈
			onShareTimeline: function(res) {
				return this.$onShareTimeline()
			},
		},
		beforeUnmount() {
			this.$refs.sale.stopSeckillActivitySwitch() // 在页面卸载前清除定时器
		},
	}
</script>
<style lang="scss">
	page {
		background-color: $base-index-back;
	}
</style>
<style lang="scss" scoped>
	.container {
		width: 750rpx;

		.main {
			.main-header {
				padding: 0 28rpx;
				box-sizing: border-box;

				.product {
					background-color: #ffffff;

					.title {
						padding: 40rpx 0;
						background-color: #ffffff;

						.product-title {
							padding: 0 20rpx;
							box-sizing: border-box;
							line-height: 1;
							font-size: 32rpx;
							font-weight: bolder;
						}
					}
				}
			}
		}
	}
</style>